<!-- 调用 -->
<template>
  <i-tree
    :data="items"
    @filter="treeFilter"
    @click="datas"
    :default="defaults"
  />
  <!-- <i-tree
    :items="items"
    @filter="treeFilter"
    @click="datas"
    :default="defaults"
  >
    <template #title="{ node }">
      <div class="v-cell__title" @click="clickNode(node)">
        {{ node.title }}
      </div>
    </template>
    <template #icon="{ node }">
      <i
        :class="
          'x_y_center van-icon van-icon-arrow-' + (node._closed ? 'up' : 'down')
        "
      ></i>
    </template>
  </i-tree> -->
</template>

<script>
import ITree from "./v-tree";

const treeData = [
  {
    id: "page",
    title: "Page",
    children: [
      {
        id: "page1-1",
        title: "Page1",
        path: "/page1",
        children: [{ id: "page2-1", title: "Page1", path: "/page1" }],
      },
      {
        id: "page1-2",
        title: "Page2",
        path: "/page2",
      },
    ],
  },
];

export default {
  name: "SysMenu",
  components: { ITree },
  data: () => ({
    items: treeData,
    activePath: "",
    defaults: {
      id: "id",
      name: "title",
      children: "children",
    },
  }),
  methods: {
    clickNode(node) {
      console.log("点击", node);
    },
    treeFilter(node) {
      console.log(node);
    },
    datas(data) {
      console.log(data);
    },
  },
  created() {
    this.activePath = this.$route.path;
  },
};
</script>
<style scoped></style>
